var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function($scope, $http) {
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5, 10, 20],
        pageSize: 20,
        currentPage: 1
    };  
    $scope.selections = [];
    $scope.setPagingData = function(data, page, pageSize,$http,$window){	
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
   };
        
    
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get("data.php").success(function (largeLoad) {		
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });            
            } else {
                $http.get("data.php").success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };
	
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
	
    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    
    var customHeader = "<div class='ngHeaderSortColumn {{col.headerClass}}' ng-style='{'cursor': col.cursor}' ng-class='{ 'ngSorted': !noSortVisible }'><div ng-click='col.sort($event)' ng-class=''colt' + col.index' class='ngHeaderText'>{{col.displayName}}<i class='icon-chevron-down' ng-show='col.showSortButtonDown()'></i><i class='icon-chevron-up' ng-show='col.showSortButtonUp()'></i></div><div class='ngSortPriority'>{{col.sortPriority}}</div><div ng-class='{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }' ng-click='togglePin(col)' ng-show='col.pinnable'></div></div><div ng-show='col.resizable' class='ngHeaderGrip' ng-click='col.gripClick($event)' ng-mousedown='col.gripOnMouseDown($event)'></div>";
	var link = "";
	
    $scope.gridOptionsParent = {
        data: 'myData',
        enablePaging: true,
        showFooter: false,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        // cellClass
    //    columnDefs: [{field: 'name', displayName: 'name', cellTemplate: '<div href="https://github.com/angular-ui/ng-grid/wiki/Templating" class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><a href="https://github.com/angular-ui/ng-grid/wiki/Templating" target="_blank">Link</a></span></div>', headerCellTemplate: customHeader},
    //                 {field: 'allowance', displayName:'allowance', cellClass: 'right', headerCellTemplate: customHeader},
    //                 {field: 'paid', displayName: 'paid', headerCellTemplate: customHeader}],
                     
        columnDefs: [{field:'Referenceno', displayName:'Ref no', width:"50",headerCellTemplate: customHeader},{field:'Date', displayName:'Date'},{field:'Dist_Name', displayName:'Client',width: 200, cellTemplate: '<div style="text-align:left;" class="ngCellText">{{row.getProperty(col.field)}}</div>'},{field:'custtype', displayName:'Type'},{field:'Business', displayName:'Business'},{field:'Sub_Category', displayName:'Category'},
		{field:'Sub_delear', displayName:'Sub-Agent Name'},{field:'Dr_Amount', displayName:'Debit', cellTemplate: '<div style="text-align:right;" class="ngCellText">{{row.getProperty(col.field)}}</div>'},{field:'Cr_Amount', displayName:'Credit', cellTemplate: '<div style="text-align:right;" class="ngCellText">{{row.getProperty(col.field)}}</div>'},{field:'Bank', displayName:'Bank'},{field:'Branch', displayName:'Branch'},{field:'payid', displayName:'Payment Mode'},{field:'paydate', displayName:'Pay Date'},{field:'remarks', displayName:'Remarks', cellTemplate: '<div style="text-align:left;" class="ngCellText">{{row.getProperty(col.field)}}</div>'}],
	             
        // Selection
        selectedItems: $scope.selections,
        multiSelect: false,
        showFooter: true,
        // Templating
        headerRowTemplate: '<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell header" ng-header-cell></div>',
        rowTemplate: "<div ng-style='{'cursor': row.cursor, 'z-index': col.zIndex() }' ng-repeat='col in renderedColumns' ng-class='col.colIndex()' class='ngCell {{col.cellClass}}' ng-cell></div>",
    };
    
     $scope.gridOptionsChild = {
        data: 'myData',
        enablePaging: true,
        showFooter: false,
        totalServerItems:'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        // cellClass
    //    columnDefs: [{field: 'name', displayName: 'name', cellTemplate: '<div href="https://github.com/angular-ui/ng-grid/wiki/Templating" class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><a href="https://github.com/angular-ui/ng-grid/wiki/Templating" target="_blank">Link</a></span></div>', headerCellTemplate: customHeader},
    //                 {field: 'allowance', displayName:'allowance', cellClass: 'right', headerCellTemplate: customHeader},
    //                 {field: 'paid', displayName: 'paid', headerCellTemplate: customHeader}],
                     
        columnDefs: [{field:'passId', displayName:'Passenger ID', width:"50",headerCellTemplate: customHeader},{field:'traveldate', displayName:'Travel date'},{field:'paxname', displayName:'Pax Name',width: 200, cellTemplate: '<div style="text-align:left;" class="ngCellText">{{row.getProperty(col.field)}}</div>'},{field:'sector', displayName:'Sector'},
    	{field:'basic', displayName:'Basic', cellTemplate: '<div style="text-align:right;" class="ngCellText">{{row.getProperty(col.field)}}</div>'},{field:'taxes', displayName:'Taxes', cellTemplate: '<div style="text-align:right;" class="ngCellText">{{row.getProperty(col.field)}}</div>'},{displayName:'Basic', cellTemplate: '<div style="text-align:right;" class="ngCellText">{{row.getProperty(col.field)}}</div>'}],
	             
        // Selection
        selectedItems: $scope.selections,
        multiSelect: false,
        showFooter: false,
        // Templating
        headerRowTemplate: '<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell header" ng-header-cell></div>',
        rowTemplate: "<div ng-style='{'cursor': row.cursor, 'z-index': col.zIndex() }' ng-repeat='col in renderedColumns' ng-class='col.colIndex()' class='ngCell {{col.cellClass}}' ng-cell></div>",
    };
 

    // Selection the row of the Grids
    $scope.$on('ngGridEventData', function(){
        $scope.gridOptions.selectRow(0, true);
    });
});
